﻿<Page
    x:Class="LayoutGridview.Views.GridView02"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:ViewModels="using:LayoutGridview.ViewModels"
    mc:Ignorable="d">

    <Page.DataContext>
        <ViewModels:GridView02ViewModel/>
    </Page.DataContext>

    <Page.Resources>
        <CollectionViewSource x:Name="MyCsv" 
                              IsSourceGrouped="True" ItemsPath="Children"
                              d:Source="{Binding Data, Source={d:DesignInstance Type=ViewModels:GridView02ViewModel, IsDesignTimeCreatable=True}}"
                              Source="{Binding Data}" />
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="320" />
        </Grid.ColumnDefinitions>

        <TextBlock Style="{StaticResource HeaderTextBlockStyle}" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="120,40,0,100">
            GridView items can be grouped
        </TextBlock>
        <SemanticZoom>
            <SemanticZoom.ZoomedInView>
                <GridView ItemsSource="{Binding Source={StaticResource MyCsv}}" Padding="120,140,80,80">
                    <GridView.GroupStyle>
                        <GroupStyle>
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <StackPanel Orientation="Horizontal">
                                        <Rectangle Height="20" Width="20" Fill="{Binding Brush}" Margin="0,0,10,0" />
                                        <TextBlock FontSize="40" Text="{Binding Title}" />
                                    </StackPanel>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                            <GroupStyle.Panel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Margin="0,0,80,0" />
                                </ItemsPanelTemplate>
                            </GroupStyle.Panel>
                        </GroupStyle>
                    </GridView.GroupStyle>
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" Margin="0,0,80,0" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Background="{Binding Brush}" Height="50" Width="200">
                                <TextBlock FontSize="20" Text="{Binding Text}" VerticalAlignment="Center" Margin="11" Foreground="Gainsboro" />
                                <TextBlock FontSize="20" Text="{Binding Text}" VerticalAlignment="Center" Margin="10" Foreground="Black" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView Padding="120,140,80,80" x:Name="MyZoomedOutView">
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Grid Height="200" Width="300" Background="{Binding Group.Brush}">
                                <TextBlock Text="{Binding Group.Title}" Foreground="White" FontSize="40" HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Grid>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

        <Rectangle Grid.Column="1" Fill="{StaticResource SemanticZoomButtonPressedBackgroundThemeBrush}" />
        <ListView ItemsSource="{Binding Source={StaticResource MyCsv}}" Padding="40,40,40,80" Grid.Column="1">
            <ListView.Header>
                <TextBlock Style="{StaticResource HeaderTextBlockStyle}" Margin="0,0,0,60">ListView</TextBlock>
            </ListView.Header>
            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.HeaderTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Rectangle Height="20" Width="20" Fill="{Binding Brush}" Margin="0,0,10,0" />
                                <TextBlock FontSize="30" Text="{Binding Title}" />
                            </StackPanel>
                        </DataTemplate>
                    </GroupStyle.HeaderTemplate>
                </GroupStyle>
            </ListView.GroupStyle>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="{Binding Brush}" Height="50" Width="220">
                        <TextBlock FontSize="20" Text="{Binding Text}" VerticalAlignment="Center" Margin="11" Foreground="Gainsboro" />
                        <TextBlock FontSize="20" Text="{Binding Text}" VerticalAlignment="Center" Margin="10" Foreground="Black" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

    </Grid>

</Page>